<div class="columns">
  <div class="column is-full">
    <div class="card commit">
      <%= with {message_title, message_body} <- commit_message_format(@repo, @commit_info.message) do %>
        <header class="card-header ellipsis">
          <p class="card-header-title"><span><%= message_title %></span></p>
          <div class="card-header-icon">
            <div class="buttons">
              <button class="commit-oid button is-small is-dark is-inverted has-text-weight-bold">
                <span class="is-family-monospace"><%= oid_fmt(@commit.oid) %></span>
              </button>
              <%= live_redirect to: Routes.codebase_path(@socket, :history, @repo.owner_login, @repo, @commit, []), class: "button is-small is-link is-inverted" do %>
                <span class="icon">
                  <i class="fa fa-history"></i>
                </span>
              <% end %>
              <%= live_redirect to: Routes.codebase_path(@socket, :tree, @repo.owner_login, @repo, @commit, []), class: "button is-small is-link is-inverted" do %>
                <span class="icon">
                  <i class="fa fa-code"></i>
                </span>
              <% end %>
            </div>
          </div>
        </header>
        <div class="card-content">
          <div class="commit-parents">
            <div class="field is-grouped">
              <div class="control">
                <%= if parent_count = Enum.count(@commit_info.parents) do %>
                  <label class="label"><%= parent_count %> parent<%= if parent_count > 1 do %>s<% end %>:</label>
                <% end %>
              </div>
              <div class="control">
                <div class="buttons">
                  <%= for parent <- @commit_info.parents do %>
                    <%= live_patch parent, to: Routes.codebase_path(@socket, :commit, @repo.owner_login, @repo, parent), class: "button is-small is-link is-inverted has-text-weight-bold" %>
                  <% end %>
                </div>
              </div>
            </div>
          </div>
          <%= render "_commit_signature.html", conn: @socket, commit: @commit, commit_info: @commit_info %>
          <%= if message_body do %>
            <div class="log-message"><%= message_body %></div>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</div>

<div class="columns commit-stats">
  <div class="column is-full">
    <p class="button is-white">
      <span>
        Showing <strong class="has-text-dark is-family-monospace"><%= @diff_stats.files_changed %> file<%= if @diff_stats.files_changed > 1 do %>s<% end %></strong>
        with <strong class="has-text-success is-family-monospace"><%= @diff_stats.insertions %> additions</strong>
        and <strong class="has-text-danger is-family-monospace"><%= @diff_stats.deletions %> deletions</strong>.
      </span>
    </p>
  </div>
</div>

<div id="diff" phx-hook="CommitDiff">
  <table class="table commit-stats-table is-fullwidth">
    <tbody>
      <%= for delta <- @diff_deltas do %>
        <tr id={"blob-#{oid_fmt(delta.new_file.oid)}"}>
          <%= if diff_comment_count = @comment_count[delta.new_file.oid] do %>
            <td>
              <a href={"##{oid_fmt(delta.new_file.oid)}"}><span class="icon"><i class="fa fa-file"></i></span> <%= delta.new_file.path %></a>
            </td>
            <td class="has-text-right">
              <a href={"##{oid_fmt(delta.new_file.oid)}"} class="button is-small is-white">
                <span class="icon"><i class="fa fa-comment-alt"></i></span>
                <span><%= diff_comment_count %></span>
              </a>
            </td>
          <% else %>
            <td colspan="2">
              <a href={"##{oid_fmt(delta.new_file.oid)}"}><span class="icon"><i class="fa fa-file"></i></span> <%= delta.new_file.path %></a>
            </td>
          <% end %>
        </tr>
      <% end %>
    </tbody>
  </table>

  <%= for delta <- @diff_deltas do %>
    <div class="columns">
      <div class="column is-full">
        <div class="card diff">
          <header class="card-header">
            <div class="card-header-title">
              <a class="button is-white"><span class="icon"><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
              <%= delta.new_file.path %>
            </div>
            <p class="card-header-icon buttons">
              <%= live_redirect to: Routes.codebase_path(@socket, :history, @repo.owner_login, @repo, @commit, Path.split(delta.old_file.path)), class: "button is-small is-link is-inverted" do %>
                <span class="icon">
                  <i class="fa fa-history"></i>
                </span>
              <% end %>
              <%= live_redirect to: Routes.codebase_path(@socket, :blob, @repo.owner_login, @repo, @commit, Path.split(delta.new_file.path)), class: "button is-small is-link is-inverted" do %>
                <span class="icon">
                  <i class="fa fa-code"></i>
                </span>
              <% end %>
            </p>
          </header>
          <div class="card-content">
            <table id={oid_fmt(delta.new_file.oid)} class="commit-table" data-lang={highlight_language_from_path(delta.new_file.path)} phx-hook="CommitDiffTable">
              <tbody>
                <%= for {hunk, hunk_index} <- Enum.with_index(delta.hunks) do %>
                  <tr class="hunk">
                    <td class="line-no" colspan="2"></td>
                    <td class="code" colspan="2">
                      <div class="code-inner nohighlight"><%= hunk.header %></div>
                    </td>
                  </tr>
                  <%= for {line, line_index} <- Enum.with_index(hunk.lines) do %>
                    <tr class={(line.origin == "+" && "diff-addition") || (line.origin == "-" && "diff-deletion")}>
                      <td class="line-no"><%= if line.old_line_no != -1, do: line.old_line_no %></td>
                      <td class="line-no"><%= if line.new_line_no != -1, do: line.new_line_no %></td>
                      <td class="code origin">
                        <%= if verified?(@current_user) do %>
                          <button class="button is-link is-small" phx-click="add_review_form" phx-value-oid={oid_fmt(delta.new_file.oid)} phx-value-hunk={hunk_index} phx-value-line={line_index}>
                            <span class="icon"><i class="fa fa-comment-alt"></i></span>
                          </button>
                        <% end %>
                        <%= line.origin %>
                      </td>
                      <td class="code">
                        <div class="code-inner"><%= line.content %></div>
                      </td>
                    </tr>
                    <%= if review = Enum.find(@reviews, &(&1.blob_oid == delta.new_file.oid && &1.hunk == hunk_index && &1.line == line_index)) do %>
                      <tr id={"review-#{oid_fmt(review.blob_oid)}-#{review.hunk}-#{review.line}"} class="inline-comments">
                        <td colspan="4">
                          <%= live_component(@socket, GitGud.Web.CommitLineReviewLive,
                            id: "review-#{review.id}",
                            current_user: @current_user,
                            repo: @repo,
                            repo_permissions: @repo_permissions,
                            agent: @agent,
                            commit: @commit,
                            review_id: review.id,
                            comments: review.comments,
                            users_typing: review.users_typing
                          ) %>
                        </td>
                      </tr>
                    <% end %>
                  <% end %>
                <% end %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <%= if connected?(@socket) do %>
    <table class="table is-hidden">
      <%= live_component(@socket, GitGud.Web.CommitDiffDynamicReviewsLive,
        id: "dynamic-reviews",
        current_user: @current_user,
        repo: @repo,
        repo_permissions: @repo_permissions,
        agent: @agent,
        commit: @commit
      ) %>
      <%= live_component(@socket, GitGud.Web.CommitDiffDynamicFormsLive,
        id: "dynamic-forms",
        current_user: @current_user,
        repo: @repo,
        repo_permissions: @repo_permissions,
        agent: @agent,
        commit: @commit
      ) %>
    </table>
  <% end %>
</div>
